/*
 * @Author: Eli.Chen
 * @Date: 2025-04-21 17:39:13
 * @LastEditors: Eli.Chen
 * @LastEditTime: 2025-04-21 18:04:03
 * @Description:
 */
import React, { useState } from 'react';
import { AutoComplete, Input } from 'antd';
import { SearchOutlined, NodeIndexOutlined, InboxOutlined } from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom';
import { modelMap } from '@/utils';
import { COLOR_THEME } from '@/config/theme';

const getRandomInt = (max, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;
// const searchResult = query =>
//   Array.from({ length: getRandomInt(5) })
//     .join('.')
//     .split('.')
//     .map((_, idx) => {
//       const category = `${query}${idx}`;
//       return {
//         value: category,
//         label: (
//           <div
//             style={{
//               display: 'flex',
//               justifyContent: 'space-between',
//             }}
//           >
//             <span>
//               Found {query} on{' '}
//               <a
//                 href={`https://s.taobao.com/search?q=${query}`}
//                 target="_blank"
//                 rel="noopener noreferrer"
//               >
//                 {category}
//               </a>
//             </span>
//             <span>{getRandomInt(200, 100)} results</span>
//           </div>
//         ),
//       };
//     });
const searchResult = (query) => {
    // 创建关键词与路由的映射表
    const routeMap = {
        社区: '/community',
        文化: '/cultPop',
        首页: '/',
    };

    return Object.entries(modelMap)
        .filter(([key]) => key.includes(query))
        .map(([key, path]) => ({
            value: key,
            label: (
                <Link
                    to={path}
                    style={{
                        display: 'block',
                        padding: '8px',
                        color: COLOR_THEME.TEXT_BASE,
                        // fontFamily: "'STXingkai', cursive"
                    }}
                >
                    <NodeIndexOutlined style={{ marginRight: 8 }} />
                    {key}
                </Link>
            ),
        }));
};
const Search = () => {
    const [options, setOptions] = useState([]);
    const [searchValue, setSearchValue] = useState('');
    const navigate = useNavigate();

    const handleSearch = (value) => {
        setSearchValue(value);
        setOptions(value ? searchResult(value) : []);
    };
    const onSelect = (value, option) => {
        // 直接使用label中的路由进行跳转
        if (option.label.props.to) {
            navigate(option.label.props.to);
            setOptions([]); // 清空搜索结果
        }
    };
    return (
        <AutoComplete
            popupMatchSelectWidth={300}
            style={{ width: 300 }}
            options={options}
            onSelect={onSelect}
            onSearch={handleSearch}
            size="large"
            notFoundContent={
                searchValue &&
                options.length === 0 && (
                    <div
                        style={{
                            padding: 8,
                            color: COLOR_THEME.TEXT_BASE,
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center',
                        }}
                    >
                        <InboxOutlined style={{ marginRight: 8 }} />
                        查无数据
                    </div>
                )
            }
            dropdownStyle={{
                maxHeight: 300,
                overflowY: 'auto',
                padding: '4px 0',
                boxShadow:
                    '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
            }}
        >
            <Input size="large" placeholder="请输入关键词搜索..." prefix={<SearchOutlined />} />
            {/* <Input.Search size="large" placeholder="input here" enterButton /> */}
        </AutoComplete>
    );
};
export default Search;
